<template>
	<u-popup v-model="showPopup" mode="bottom" border-radius="20" closeable>
		<view class="u-p-30 font-medium u-font-32">
			<view>支付订单</view>
		</view>
		<view class="align-center u-p-t-40 font-medium">
			<text style="font-size: 48rpx;">￥</text>
			<text style="font-size: 80rpx;">{{orderInfo.pay_price}}</text>
		</view>
		<view class="pay-types">
			<view class="u-flex">
				<view class="u-flex u-col-top u-flex-1">
					<text class="iconfont icon-weixinzhifu u-type-primary u-m-r-20 u-font-40"></text>
					<view class="u-flex-1">
						<view class="u-font-34 font-medium u-m-b-16">微信支付</view>
						<view class="u-light-color">使用微信支付</view>
					</view>
				</view>

				<text class="iconfont icon-chenggong u-type-primary" style="font-size: 56rpx;"></text>
			</view>
		</view>
		<view class="pay-btn">
			<u-button type="primary" hover-class="none" shape="circle" @click="queryPayrOrder">确认支付</u-button>
		</view>
	</u-popup>
</template>

<script>
	export default {
		name: "bb-payment",
		props: {
			value: {
				type: Boolean,
				default: false
			},
			orderInfo: {
				type: Object,
				default: () => {
					return {}
				}
			}
		},
		data() {
			return {
				showPopup: false
			};
		},
		watch: {
			value(val) {
				this.showPopup = val
			},
			showPopup(val) {
				this.$emit('input', val)
			}
		},
		methods: {
			queryPayrOrder() {
				uni.showLoading({
					title: '支付中...'
				})
				this.$u.api.orderPayment(this.orderInfo.order_id, {
					from: 'routine',
					payType: 'weixin'
				}).then(res => {
					console.log(res);
					uni.requestPayment({
						provider: 'wxpay',
						// #ifdef MP
						...res.result.jsConfig,
						// #endif
						// #ifdef APP-PLUS
						orderInfo: {
							...res.result.jsConfig,
						},
						// #endif
						success: (res) => {
							this.$u.toast('支付成功')
							this.$emit('complate')
							console.log('成功');
						},
						fail: (err) => {
							console.log('失败', err)
							this.$u.toast('支付已取消')
						},
						complete: () => {
							this.showPopup = false
							uni.hideLoading()
						}
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pay-types {
		border-radius: 20rpx;
		padding: 40rpx;
		margin: 30rpx;
		border: 1px solid #eeeeee;
	}

	.pay-btn {
		padding: 30rpx 30rpx 60rpx;
	}
</style>